<template>
    <div class="container">
      <div class="title">数量编辑</div>
      <dankal-count-control v-model="count"/>

      <div class="title">图片上传</div>
      <dankal-image-upload v-model="imgList"/>

      <div class="title" @click="isShowModal=true">对话弹窗</div>
      <dankal-modal v-model="isShowModal" background="none">
        <div slot="content">对话弹窗</div>
      </dankal-modal>

      <div class="title">搜索框</div>
      <dankalSearchBox v-model="keywords"/>

      <div class="title">选项卡</div>
      <dankal-tab-control :options='tabControl' v-model="tabControlInd"/>
    </div>
</template>

<script>

  import dankalCountControl from '@/components/dankal-count-control';
  import dankalImageUpload from '@/components/dankal-image-upload';
  import dankalModal from '@/components/dankal-modal';
  import dankalSearchBox from '@/components/dankal-search-box';
  import dankalTabControl from '@/components/dankal-tab-control';

  export default {
    config: {
      navigationBarTitleText: '组件',
    },
    data() {
      return {
        count: 0,
        imgList: [],
        isShowModal: false,
        keywords: '',
        tabControl: ['a', 'b'],
        tabControlInd: 0,
      };
    },
    components: {
      dankalCountControl,
      dankalImageUpload,
      dankalModal,
      dankalSearchBox,
      dankalTabControl,
    },
    mounted() {
    },
    methods: {
      network() {
        return {
          example: async () => {
            console.log('network');
          },
        };
      },
      handler() {
        return {
          example: () => {
            console.log('handle');
          },
        };
      },
    },
  };
</script>

<style lang="scss" scoped>

  .container{
    padding: 0 30rpx;
    .title{
      padding: 30rpx 0;
    }
  }
</style>
